// ============================================================================
// Toolbar.
// Toolbar is a set of predefined flex utilities that help build toolbar-like
// components easily.
// ============================================================================

// toolbar is just a symbolic representatin for d-flex.
.toolbar {
  @extend .d-flex;
  @extend .align-items-center;
  @extend .align-self-stretch;
  height: 2.5em;
  line-height: 2.5em;
  transition-duration: .5s;

  img {
    vertical-align: center;
  }
}

.tb-group {
  @extend .toolbar;
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint);

    .tb#{$infix}-text {
      align-self: stretch;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      text-decoration: none;
      min-width: 1em;
      padding: 0 0.75em;
    }

    .tb#{$infix}-item {
      @extend .tb#{$infix}-text;
      cursor: pointer;

      &:hover, &.active {
        background-color: #efefef;
        text-decoration: none;
      }
      
      > * {
        flex: 1;
      }
    }

    .tb#{$infix}-btn {
      display: flex;
      text-align: center;
      text-decoration: none;
      border-radius: $border-radius;
      padding: .5em .75em;
      line-height: 1em;
      cursor: pointer;

      &:hover, &.active {
        background-color: #efefef;
        text-decoration: none;
      }

      .tb-group > & {
        &:first-child {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        &:last-child {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}
